<template>
    <div class="components_edit_modal questionnaire-result-detail" id="questionnaire_process">
        <el-dialog title="问卷实例详情" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
            <h2>{{teacherName}}</h2>
            <span class="field-name"><b>院校:</b>{{schoolName}}</span>
            <span class="field-name"><b>班级:</b>{{className}}</span>
            <span class="field-name"><b>课程:</b>{{courseName}}</span>
            <span class="field-name"><b>讲师姓名:</b>{{teacherName}}</span>
            <div class="line_feed">

                    <el-table :data="questionScoreList"  border stripe style="width: 100%" height="200" class="components_edit_tables">
                        <el-table-column prop="itemName" label="指标" align="center" width="150"></el-table-column>
                        <el-table-column  label="行为描述" align="center">
                            <template slot-scope="scope">
                            <ul class="text-left">
                                <li v-for="(item,index) in questionScoreList[scope.$index].itemDescriptionList" :key="index">
                                    <el-tooltip class="item" effect="light" :content="item" placement="top" :open-delay="delay" ><span>{{item}}</span></el-tooltip>
                                </li>
                            </ul>
                            </template>
                        </el-table-column>
                        <el-table-column prop="countResult" label="评分" align="center" width="50"></el-table-column>
                    </el-table>
                </div>
                <div v-for="advice in quetionAdviceList">
                    <h2>{{advice.itemName}}</h2>
                    <div v-for="(item,index) in advice.resultList">
                        <p>{{(index+1)+"."+item}}</p>
                    </div>
                </div>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="state = false">关 闭</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {enums} from '@/constant'
    export default {
        components: {

        },
        data() {
            return {
                 state: false,
                 delay:300,
                 teacherName:null,
                 schoolName:null,
                 className:null,
                 courseName:null,
                 teacherName:null,
                 questionScoreList:[],
                 quetionAdviceList:[]
            }
        },
        created() {

        },
        mounted() {},
        methods: {
            showDialog(id,schoolName,className,courseName,teacherName){
                let self = this;
                self.schoolName =schoolName;
                self.className =className;
                self.courseName =courseName;
                self.teacherName =teacherName;
                this.getQuestionnaireInitiateDetail(id,
                    (result)=>{
                        let questionScoreList=[];
                        let quetionAdviceList=[];
                        // if(result.length>0){
                        //     self.teacherName =result[0].questionnaireName;
                        // }
                        result.map((item)=>{
                            if(item.itemType == '0'){
                                questionScoreList.push(item);
                            }else{
                                quetionAdviceList.push(item);
                            }
                       })
                       self.questionScoreList = questionScoreList;
                       self.quetionAdviceList = quetionAdviceList;
                    }
                );
                this.state = true;
            },
            getQuestionnaireInitiateDetail(id,success){
                 let self = this;
                self.axios.get(api.questionnaire.questionnaireInstanceDetail+id).then((response) => {
                    if (response.data.success) {
                        success(response.data.data);
                    } else {
                        self.$message.error(response.data.msg);
                    }
                })
            }
        }
    };
</script>
<style>
  #questionnaire_process .el-dialog__body{ max-height:400px; overflow-y: auto;}
  .questionnaire-result-detail .el-dialog__body{
    padding:5px 20px 30px 20px;
  }
  .questionnaire-result-detail .field-name{
    margin-left:15px;
  }
</style>
